<template>
  <div>
    <div class="d-flex align-item-center mb-1">
      <div class="flex-grow-1" style="font-size: 1.142857rem">项目分布</div>
      <button class="btn btn-sm btn-outline-primary" v-show="level > 0" @click="setCity">
        <i class="fa fa-angle-double-left"></i>
        返回
      </button>
    </div>
    <el-echarts
      :option="option"
      ref="echarts"
      theme="macarons"
      :height="260"
      @onInit="onInit"
      :event-listener="{ click: onClick }"
    ></el-echarts>
  </div>
</template>
<script>
import { echartsXFormatter } from '@vimi/utils-tool'
import { mapGetters } from 'vuex'

export default {
  components: {},
  props: {},
  data() {
    return {
      chart: {},
      option: null,
      level: 0,
      cityData: [],
      countyData: [],
    }
  },
  computed: {
    ...mapGetters(['user', 'org']),
    orgRegionLever() {
      return this.user.orgRegionLever
    },
    submitType() {
      return this.org.orgClass === 'org_gov_ny' ? '1' : '4'
    },
  },
  watch: {},
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    onInit(chart) {
      this.chart = chart
    },
    async onClick(xIndex) {
      if (this.level > 0 || this.orgRegionLever >= 4) return

      const addressCode = this.cityData.addressCodeList[xIndex]

      this.chart.showLoading()
      const [res, err] = await this.fetchData(addressCode)
      this.chart.hideLoading()

      if (err) {
        return this.$message.error('请求数据失败，请重试！')
      }

      let xData = res.data.addressList
      let aData = res.data.customerApprovalList
      let bData = res.data.customerApplyList
      this.setOption('分乡镇', xData, aData, bData)
      this.level++
    },
    async getData() {
      const addressCode = this.$utils.getAddressCode()
      const [res, err] = await this.fetchData(addressCode)
      if (err) {
        return this.$message.error('请求数据失败，请重试！')
      }
      this.cityData = res.data || {}
      this.setCity()
    },
    fetchData(addressCode) {
      return this.$utils.promise(
        this.$http.get(
          `/industrial/customer/gov/collect/?addressCode=${addressCode}&submitType=${this.submitType}`
        )
      )
    },
    setCity() {
      this.level = 0
      const xData = this.cityData.addressList || []
      const aData = this.cityData.customerApprovalList || []
      const bData = this.cityData.customerApplyList || []

      this.setOption('分区县', xData, aData, bData)
    },
    setOption(subtext, xData, aData, bData) {
      this.option = {
        title: {
          text: '客户分布',
          show: false,
          subtext: subtext,
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['审批的客户', '申请的客户'],
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        grid: {
          left: 50,
          right: 50,
        },
        xAxis: [
          {
            type: 'category',
            data: xData,
            axisLabel: {
              formatter: v => echartsXFormatter(v, 4),
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '数量(个)',
          },
        ],
        series: [
          {
            name: '审批的客户',
            type: 'bar',
            data: aData,
            label: { show: true, position: 'top' },
          },
          {
            name: '申请的客户',
            type: 'bar',
            data: bData,
            label: { show: true, position: 'top' },
          },
        ],
      }
    },
  },
}
</script>
<style scoped></style>
